<!DOCTYPE html>
<html>
<head>
    <title>Ceadeal 后台管理系统</title>
    <#include "../common/head.ftl"/>
    <link rel="stylesheet" href="/plugin/editor.md/css/editormd.preview.min.css" />
    <style type="text/css">
        #md-view{ padding:0 !important; }
        .title{ font-weight:bold; text-align:center; margin-bottom:10px !important }
    </style>
</head>
<body class="cw-body">
<div id="page-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            文章管理
            <small>&nbsp;</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/main"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">文章管理</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Your Page Content Here -->
        <ul class="nav nav-tabs">
            <li role="presentation"><a href="/article/list">列表</a></li>
            <li role="presentation"><a href="/article/edit">新增</a></li>
            <li role="presentation" class="active"><a href="#">查看</a></li>
            <!-- /... -->
        </ul>

        <!-- box 1 -->
        <div class="box box-primary box-no-margin-bottom">
            <div class="box-header with-border">
                <h3 class="box-title"><i class="fa fa-eye"></i>&nbsp;文章查看</h3>
                <div class="box-tools pull-right">
                    <button type="button" id="btn_down" class="btn btn-success btn-xs btn-xs-custom"><i class="fa fa-download"></i></button>&emsp;
                    <button type="button" id="btn_edit" class="btn btn-warning btn-xs btn-xs-custom"><i class="fa fa-pencil"></i></button>&emsp;
                    <button type="button" id="btn_back" class="btn btn-default btn-xs btn-xs-custom"><i class="fa fa-arrow-left"></i></button>&emsp;
                    <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div>
            </div>
            <div class="box-body">
                <div class="titile-wrapper">
                    <h1 class="title">${(article.title)!}</h1>
                    <p style="text-align:center">创建时间：${article.createDate?datetime}&emsp;更新时间：<#if article.updateDate??>${article.updateDate?datetime}<#else>--</#if>&emsp;作者：${article.authorName!'匿名'}</p>
                </div>
                <div id="md-view">
                    <textarea id="article-content" name="content">${(article.content)!}</textarea>
                </div>
            </div>
            <div class="box-footer with-border">
                <button type="button" id="btn_back_bottom" class="btn btn-default btn-control"><i class="fa fa-arrow-left"></i>&nbsp;返&nbsp;回</button>
            </div>
        </div>
        <!-- /.box -->

    </section>
    <!-- /.content -->
</div>

<!-- REQUIRED JS SCRIPTS -->
<#include "../common/script-common.ftl"/>
<script src="/plugin/editor.md/lib/marked.min.js"></script>
<script src="/plugin/editor.md/lib/prettify.min.js"></script>
<script src="/plugin/editor.md/lib/raphael.min.js"></script>
<script src="/plugin/editor.md/lib/underscore.min.js"></script>
<script src="/plugin/editor.md/lib/sequence-diagram.min.js"></script>
<script src="/plugin/editor.md/lib/flowchart.min.js"></script>
<script src="/plugin/editor.md/lib/jquery.flowchart.min.js"></script>
<script src="/plugin/editor.md/editormd.min.js"></script>
<script>
    var editormdView;

    $(function(){
        $(document).on("click", "#btn_down", function(){
            location.href = "/article/download?id=${article.id}";
        })
        $("#btn_edit").click(function() {
            location.href = "/article/edit?id=${article.id}";
        });
        $("#btn_back,#btn_back_bottom").click(function() {
            location.href = "/article/list";
        });

        editormdView = editormd.markdownToHTML("md-view", {
            htmlDecode      : "style,script,iframe",  // you can filter tags decode
            emoji           : true,
            taskList        : true,
            tex             : true,  // 默认不解析
            flowChart       : true,  // 默认不解析
            sequenceDiagram : true,  // 默认不解析
        });
    });
</script>
</body>
</html>